<template>
  <div class="z-notice">
    <div class="case">
      <div id="announce">
        <a v-for="(notice,index) in notices" :key="index"><p>{{notice.value}}</p></a>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return {
      }
    },
    props: {
      notices:{
        type:Array,
        required:true
      }
    },
    methods:{
      autoplay:function(lh,speed,delay){
        //lh为行高lineheight，speed为滚动速度，delay为延迟、停顿的时间
        var p=false,t,announce = mui("#announce")[0],that=this;
        announce.innerHTML+=announce.innerHTML;
        announce.style.marginTop=0;
        announce.onmouseover=function(){p=true;};
        announce.onmouseout=function(){p=false;};
        function start(){
          t=setInterval(scrolling,speed);
          if(!p) announce.style.marginTop=parseFloat(announce.style.marginTop)-0.01+"rem";
        }
        function scrolling(){
          if(parseFloat(announce.style.marginTop)*10%(lh*10)!=0){
            announce.style.marginTop=parseFloat(announce.style.marginTop)-0.01+"rem";
            if(Math.abs(parseFloat(announce.style.marginTop))*10> lh*10*that.notices.length){
              announce.style.marginTop=0
            };
          }else{
            clearInterval(t);
            setTimeout(start,delay);
          }
        }
        setTimeout(start,delay);
      }
    },
    mounted(){
      this.autoplay(0.6,20,4000);
    },
  }
</script>

<style scoped lang="less">
  .z-notice{
    background: #fff;
    .case{
      background:url("https://hahanongjiang.oss-cn-qingdao.aliyuncs.com/hahanongjiang/yixiaoguoji/icon/laba2.png") no-repeat left;
      background-size: 0.35rem;
      height:0.6rem;
      line-height:0.6rem;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      margin: 0 0.3rem;
      padding-left: 0.62rem;
      #announce{
        a{
          height:0.6rem;
          line-height:0.6rem;
          display: -webkit-flex; /* Safari */
          display: flex;
          align-items:center;
          p{
            font-size: 0.3rem;
            font-family: PingFang-SC-Light;
            color: rgb(51,51,51);
            height:0.6rem;
            margin: 0;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
</style>
